<template>
  <!-- 我的主页 -->
  <div class="personal-right">
    <h2>我的书架</h2>
    <div class="tab">
      <div class="home-page">
        <el-tabs v-model="activeName" @tab-click="hangdleClick">
          <el-tab-pane label="拥有的书" name="first"></el-tab-pane>
          <el-tab-pane label=" 心愿单" name="second"></el-tab-pane>
          <el-tab-pane label="推荐" name="third"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="tab-right">
        <span v-show="activeName==='first'">共0本</span>
        <el-radio v-model="radio" label="1" v-show="activeName==='first'">纸质书</el-radio>
        <el-radio v-model="radio" label="2" v-show="activeName==='first'">电子书</el-radio>
        <span v-show="activeName==='second'">共0本</span>
      </div>
    </div>
  </div>
</template>

<script>
import "../../../assets/css/home.css";

export default {
  name: "Book",
  data() {
    return {
      activeName: "first",
      radio: "1",
      
    };
  },
  methods: {
    hangdleClick(tab, event) {
      console.log(tab, event);
      this.isshow = event.props.name;
    },
  },
};
</script>

<style scoped>
.tab {
  position: relative;
  width: 825px;
  height: 42px;
  justify-content: space-between;
  align-items: center;
}

.tab-right {
  position: absolute;
  right: 67px;
  height: 40px;
  line-height: 40px;
  top: 0;
}
.tab-right span {
  margin-right: 10px;
}

.tab-left .tab-inner {
  line-height: 45px;
  text-align: center;
  width: 80px;
  height: 45px;
}
</style>
